<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="echarts.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
    <div id='1' style="width: 500px;height: 500px;"></div>
<script type="text/javascript">
var mychart = echarts.init(document.getElementById('1'))
mychart.showLoading();
$.get(ROOT_PATH + 'data/asset/geo/HK.json', function (geoJson) {

myChart.hideLoading();

echarts.registerMap('china', geoJson);

myChart.setOption(
    option = {
    title: {
        text: '香港18区人口密度 （2011）',
        subtext: '人口密度数据来自Wikipedia',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
    },
    visualMap: {
        min: 800,
        max: 50000,
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue','yellow', 'orangered']
        }
    },
    series: [
        {
            name: '香港18区人口密度',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:false}}
            },
            data:[
                {name: '新疆', value: 20057.34},
            ],
        }
    ]
});
});;
</script>
</body>

</html>